/* 
### 练习综合案例 ###

需求：
根据用户输入的个数，页面可以渲染对应王者荣耀英雄的个数

效果如下：
 <img src="./images/222.gif">

思路分析：
1. 渲染图片比较多，我们可以采取循环方式重复渲染图片
2. 图片名称是有序号排列的，比如 1.webp 2.webp 此处可以使用循环计数器
3. 渲染位置？ 可以考虑放到 box 盒子里写 script 即可 */

let num;
while (true) {
    num = +prompt("请输入想要显示的有英雄个数(0~20)：");
    let alertStr;
    if (num < 0) {
        alertStr = "【区间错误】\n个数不能小于0！";
    } else if (num > 20) {
        alertStr = "【区间错误】\n个数超过最大显示数量(20)！";
    } else if (num == 0) { 
        alertStr = "【区间错误】\n请至少输入数量1！";
    } else if (isNaN(num)) {
        alertStr = "【错误输入】\n请输阿拉伯数字！";
    } else {
        break;
    }
    alertStr += "\n请重新输入！";
    alert(alertStr);
}

let str = ``;
for (let i = 1; i <= num; i++) {
    str += `<li><img src="./images/${i}.webp" alt="" /></li>`
}
document.write(`<ul class="box">${str}</ul>`);




































console.log(`
也许你会问为什么我非要写的有效果
是因为爱好吗？
是因为复习吗？
不！
`);
console.log("%c是因为内卷！！", "color:red");